<template>
  <div class="menu-publish">
    <h2>导航菜单管理</h2>
    <el-button type="primary" @click="openAddDialog">添加菜单</el-button>
    <el-table :data="menuList" style="margin-top: 20px">
      <el-table-column prop="title" label="菜单名称" />
      <el-table-column prop="path" label="路由路径" />
      <el-table-column label="状态">
        <template #default="scope">
          {{ scope.row.isActive ? '启用' : '禁用' }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="editMenu(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="confirmDelete(scope.row)">删除</el-button>
          <el-button size="small" type="info" @click="previewMenu(scope.row)">预览</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加/编辑菜单对话框 -->
    <el-dialog v-model="showDialog" :title="isEdit ? '编辑菜单' : '添加菜单'">
      <el-form :model="currentMenu" label-width="90px">
        <el-form-item label="菜单名称">
          <el-input v-model="currentMenu.title" />
        </el-form-item>
        <el-form-item label="路由路径">
          <el-input v-model="currentMenu.path" />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="currentMenu.isActive" />
        </el-form-item>
        <el-form-item label="页面标题">
          <el-input v-model="currentMenu.content.title" />
        </el-form-item>
        <el-form-item label="页面图片">
          <el-upload
            class="upload-demo"
            action=""
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handleImageChange"
          >
            <el-button size="small">选择图片</el-button>
          </el-upload>
          <img v-if="currentMenu.content.banner" :src="currentMenu.content.banner" style="max-width: 120px; margin-left: 10px;" />
        </el-form-item>
        <el-form-item label="页面内容">
          <el-input
            v-model="currentMenu.content.content"
            type="textarea"
            :rows="5"
            placeholder="支持富文本内容，可后续集成富文本编辑器"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="saveMenu">保存</el-button>
      </template>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog v-model="showDeleteDialog" title="确认删除">
      <p>确定要删除菜单 "{{ menuToDelete?.title }}" 吗？</p>
      <template #footer>
        <el-button @click="showDeleteDialog = false">取消</el-button>
        <el-button type="danger" @click="deleteMenu">确定</el-button>
      </template>
    </el-dialog>

    <!-- 预览对话框 -->
    <el-dialog v-model="showPreviewDialog" title="页面预览" width="600px">
      <h3>{{ previewMenuData?.content.title }}</h3>
      <img v-if="previewMenuData?.content.banner" :src="previewMenuData.content.banner" style="max-width: 100%; margin-bottom: 10px;" />
      <div style="white-space: pre-line;">{{ previewMenuData?.content.content }}</div>
      <template #footer>
        <el-button @click="showPreviewDialog = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

interface MenuContent {
  title: string
  banner?: string
  content: string
}
interface MenuItem {
  id: number
  title: string
  path: string
  order: number
  isActive: boolean
  content: MenuContent
}

const menuList = ref<MenuItem[]>([])
const showDialog = ref(false)
const isEdit = ref(false)
const currentMenu = reactive<MenuItem>({
  id: 0,
  title: '',
  path: '',
  order: 0,
  isActive: true,
  content: { title: '', banner: '', content: '' }
})
const showDeleteDialog = ref(false)
const menuToDelete = ref<MenuItem | null>(null)
const showPreviewDialog = ref(false)
const previewMenuData = ref<MenuItem | null>(null)

function loadMenus() {
  const data = localStorage.getItem('navMenuList')
  if (data) {
    menuList.value = JSON.parse(data)
  } else {
    // 静态生成前台导航菜单
    menuList.value = [
      { id: 1, title: '网站首页', path: '/', order: 0, isActive: true, content: { title: '网站首页', banner: '', content: '' } },
      { id: 2, title: '新闻传媒', path: '/news', order: 1, isActive: true, content: { title: '新闻传媒', banner: '', content: '' } },
      { id: 3, title: '爱之浓丝', path: '/brand', order: 2, isActive: true, content: { title: '爱之浓丝', banner: '', content: '' } },
      { id: 4, title: '水太极宫', path: '/special-product', order: 3, isActive: true, content: { title: '水太极宫', banner: '', content: '' } },
      { id: 5, title: '曼谷伊美', path: '/bangkok', order: 4, isActive: true, content: { title: '曼谷伊美', banner: '', content: '' } },
      { id: 6, title: '产品项目', path: '/products', order: 5, isActive: true, content: { title: '产品项目', banner: '', content: '' } },
      { id: 7, title: '形象设计', path: '/design', order: 6, isActive: true, content: { title: '形象设计', banner: '', content: '' } },
      { id: 8, title: '我要加盟', path: '/join', order: 7, isActive: true, content: { title: '我要加盟', banner: '', content: '' } },
      { id: 9, title: '联系我们', path: '/contact', order: 8, isActive: true, content: { title: '联系我们', banner: '', content: '' } }
    ]
    saveMenus()
  }
}
function saveMenus() {
  localStorage.setItem('navMenuList', JSON.stringify(menuList.value))
}
function openAddDialog() {
  isEdit.value = false
  Object.assign(currentMenu, {
    id: Date.now(),
    title: '',
    path: '',
    order: menuList.value.length,
    isActive: true,
    content: { title: '', banner: '', content: '' }
  })
  showDialog.value = true
}
function editMenu(menu: MenuItem) {
  isEdit.value = true
  Object.assign(currentMenu, JSON.parse(JSON.stringify(menu)))
  showDialog.value = true
}
function saveMenu() {
  if (!currentMenu.title || !currentMenu.path) {
    ElMessage.error('菜单名称和路径不能为空')
    return
  }
  if (isEdit.value) {
    const idx = menuList.value.findIndex(m => m.id === currentMenu.id)
    if (idx !== -1) menuList.value[idx] = JSON.parse(JSON.stringify(currentMenu))
  } else {
    menuList.value.push(JSON.parse(JSON.stringify(currentMenu)))
  }
  saveMenus()
  showDialog.value = false
  loadMenus()
  ElMessage.success('保存成功')
}
function confirmDelete(menu: MenuItem) {
  menuToDelete.value = menu
  showDeleteDialog.value = true
}
function deleteMenu() {
  if (menuToDelete.value) {
    menuList.value = menuList.value.filter(m => m.id !== menuToDelete.value!.id)
    saveMenus()
    loadMenus()
    showDeleteDialog.value = false
    ElMessage.success('删除成功')
  }
}
function previewMenu(menu: MenuItem) {
  previewMenuData.value = menu
  showPreviewDialog.value = true
}
function handleImageChange(file: any) {
  const reader = new FileReader()
  reader.onload = e => {
    currentMenu.content.banner = e.target?.result as string
  }
  reader.readAsDataURL(file.raw)
}
onMounted(loadMenus)
</script>

<style scoped>
.menu-publish {
  padding: 24px;
  background: #fff;
  min-height: 100%;
}
</style> 